<template>
  <div>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    @close='closeDialog'
    destroy-on-close

  >
    <vab-query-form>
      <vab-query-form-left-panel>

          <el-button type="primary" @click="save" style="width: 150px">添加活动记录</el-button>



      </vab-query-form-left-panel>
      <vab-query-form-right-panel>
      </vab-query-form-right-panel>
    </vab-query-form>
    <el-divider>添加活动记录</el-divider>
    <el-form ref="list"    :model="list"    :rules="rules" label="top" :inline="true">


      <el-form-item label="活动时间" prop="activityTime">
        <el-date-picker
          v-model="list.activityTime"
          type="datetime"
          placeholder="选择活动时间">
        </el-date-picker>

      </el-form-item>
      <el-form-item label="活动地点" prop="eventLocation">
        <el-input v-model="list.eventLocation"></el-input>

      </el-form-item>


      <el-form-item label="参与人员" prop="participatingMembers" >
        <el-select v-model="list.participatingMembers" multiple placeholder="请选择"   >
          <el-option
            v-for="item in options"

            :key="item.checkInMark"
            :label="item.elderlyName"
            :value="item.checkInMark">
          </el-option>
        </el-select>

      </el-form-item>
      <el-form-item label="活动内容" prop="activityContent" >
        <el-input v-model="list.activityContent" type="textarea" ></el-input>

      </el-form-item>


    </el-form>
    <el-divider>活动记录展示</el-divider>

    <el-table
      ref="multipleTable"
      :data="tableData"
      v-loading="listLoading"

      tooltip-effect="dark"
      style="width: 100%"

    >

      <el-table-column
        label="活动时间"
       >
        <template slot-scope="scope">
          {{scope.row.activityTime | parseTime('{y}-{m}-{d}  {h}:{i}:{s}')}}
        </template>
      </el-table-column>
      <el-table-column
        label="活动地点"
        >
        <template slot-scope="scope">{{ scope.row.eventLocation }}</template>
      </el-table-column>
      <el-table-column
        label="活动内容"
       >
        <template slot-scope="scope">{{ scope.row.activityContent }}</template>
      </el-table-column>
      <el-table-column
        label="参与人员"
        prop="teamMembers"
        >
        <template slot-scope="scope">
        <div v-for="(item, index) in tableData[scope.$index].teamMembers" :key="index" style="float: left">
          {{scope.row.teamMembers[index].elderlyName}},
        </div>

      </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="操作"

        fixed="right"
      >
        <template slot-scope="scope" >
          <el-button type="text"   @click="reserveactive(scope.row)" >
            修改兴趣小组活动情况<i class="el-icon-edit"></i></el-button>


        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :background="background"
      :current-page="queryForm.currPageNo"
      :total="total"
      :page-size="queryForm.limit"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    ></el-pagination>

  </el-dialog>
  <el-dialog
    title="修改兴趣小组记录"
    :visible.sync="dialogFormVisibles"
    width="400px"
    destroy-on-close

  >

    <el-form ref="form"    :model="form"     >


      <el-form-item label="活动时间" required>
        <div>
          {{form.activityTime | parseTime('{y}-{m}-{d}  {h}:{i}:{s}')}}
        </div>
      </el-form-item>
      <el-form-item label="活动地点" required>
        <el-input v-model="form.eventLocation"></el-input>

      </el-form-item>


      <el-form-item label="参与人员" required >
        <el-select v-model="form.participatingMembers" multiple placeholder="请选择" style="width: 100%">
          <el-option
            v-for="item in options"
            :key="item.checkInMark"
            :label="item.elderlyName"
            :value="item.checkInMark">
          </el-option>
        </el-select>

      </el-form-item>
      <el-form-item label="活动内容" required >
        <el-input v-model="form.activityContent" type="textarea"  ></el-input>

      </el-form-item>


    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisibles=false" >取 消</el-button>
      <el-button type="primary" @click="saveactive">保 存</el-button>

    </div>
  </el-dialog>
  </div>
</template>

<script>
    import { parseTime} from "@/utils/index";
    import {searchactive,addactive,reserveactive} from "@/api/tasteorgan";
    export default {
        name: "activity",
        filters:{
            parseTime:parseTime
        },
        data(){
          return{
              dialogFormVisibles:false,
              dialogFormVisible:false,
              title:"小组活动记录",
               options:[],
              tableData:[],
              listLoading:true,
              total:0,
              background:true,
              queryForm:{
                  groupCode:"",
                  currPageNo:1,
                  limit:8
              },
             form:{
                 activityContent:"",//活动内容
                 activityTime:"",//活动时间
                 eventLocation:"",//活动地点
                 participatingMembers:[],
             },
              list:{
                  groupCode:"",
                  activityContent:"",//活动内容
                  activityTime:"",//活动时间
                  eventLocation:"",//活动地点
                  participatingMembers:[

                  ]//参与成员
              },
              rules: {
                  activityContent: [
                      { required: true, message: '活动内容', trigger: 'blur' },

                  ],
                  activityTime: [
                      { required: true, message: '活动时间', trigger: 'change' },

                  ],
                  eventLocation: [
                      { required: true, message: '活动地点', trigger: 'blur' },

                  ],
                  participatingMembers: [
                      { required: true, message: '参与人员', trigger: 'change' },

                  ],
              }
          }
        },
        methods:{
            showEdit(row) {

              this.list.participatingMembers=[]
                this.options=[]
                for (let i=0;i<row.teamMembers.length;i++){
                    if(row.teamMembers[i].quitTime){

                    }else {
                        console.log(row.teamMembers[i])
                        this.options.push(row.teamMembers[i])
                    }
                }
                this.list.groupCode=row.groupCode
                this.queryForm.groupCode=row.groupCode

                this.dialogFormVisible = true;

               this.searchactive()

            },
            save(){
                this.$refs['list'].validate((valid) => {
                    if (valid) {
                        addactive(this.list).then(res =>{
                            console.log(res)
                           this.queryForm.currPageNo=1
                            this.$baseMessage("活动记录添加成功");
                           this.searchactive()



                        })
                    } else {

                        return false;
                    }
                });
              console.log(this.list)
            },
            handleSizeChange(val) {
                this.queryForm.limit = val;
                this.searchactive();
            },
            handleCurrentChange(val) {

                this.queryForm.currPageNo = val;
                this.searchactive();
            },
            searchactive(){
                   this.listLoading=true
                searchactive(this.queryForm).then(res =>{


                    this.tableData=res.data.data
                    this.total=res.data.total



                })
                setTimeout(() => {
                    this.listLoading = false;
                }, 500);
            },
            reserveactive(row){
                 this.dialogFormVisibles=true
                 console.log(row.teamMembers)
                   this.form.participatingMembers=[]

                   this.form.activityContent=row.activityContent
                   this.form.activityTime=row.activityTime
                 this.form.groupCode=row.groupCode
                  this.form.eventLocation=row.eventLocation
                for(let i=0;i<row.teamMembers.length;i++){

                    this.form.participatingMembers.push(row.teamMembers[i].checkInMark)
                }





            },
            closeDialog(){

                this.$refs['list'].resetFields();


            },

            saveactive(){

                reserveactive(this.form).then(res =>{
                    console.log(res)
                    this.$baseMessage("修改成功");
                    this.queryForm.currPageNo=1
                    this.dialogFormVisibles=false
                    this.searchactive()



                })
                console.log(this.form)
            }
        }
    }
</script>

<style scoped>

</style>
